import React, { useEffect, useState } from 'react';
import { GridContent, PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Typography, Row, Col, List, Avatar, Tooltip, Comment, Button } from 'antd';
import styles from './Welcome.less';
import ResourceCard from '@/components/ResourceCard';
import Meta from 'antd/lib/card/Meta';
import { addDiscuss, getAllDiscuss } from '@/services/ant-design-pro/discuss';
import moment from 'moment';
import TextArea from 'antd/lib/input/TextArea';
import { getLinks } from '@/services/ant-design-pro/links';
import defaultUser from '@/assets/defaultUser.jpg';

const DEFAULT_PAGE_SIZE = 6;

const listGrid = {
  gutter: 16,
  xs: 1,
  sm: 1,
  md: 2,
  lg: 2,
  xl: 3,
  xxl: 3,
};

const CodePreview = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
);

const Welcome = () => {
  const [loading, setLoading] = useState(false);
  const [discuss, setDiscuss] = useState('');
  const [content, setContent] = useState('');
  const [pageNum, setPageNum] = useState([1]);
  const [resources, setResources] = useState([]);

  useEffect(() => {
    if (loading === false) {
      getDiscuss();
      requestLinks();
      setLoading(true);
    }
  });

  // 请求所有资源
  const requestLinks = async (values) => {
    try {
      const res = await getLinks({ ...values });
      setResources(res.data.slice(0, 9));
    } catch (error) {
      console.log(error);
    }
  };

  // 获取所有讨论
  const getDiscuss = async () => {
    try {
      const res = await getAllDiscuss({});
      setDiscuss(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  // 添加讨论
  const addDis = async (values) => {
    try {
      const res = await addDiscuss({ ...values });
      // console.log(res);
      getDiscuss;
      setContent('');
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className={styles.filterCardList}>
      <GridContent>
        <Row gutter={24}>
          <Col xl={18} lg={24} xs={24}>
            <Card>
              <Meta title="推荐"></Meta>
            </Card>
            <List
              rowKey="id"
              itemLayout="horizontal"
              dataSource={resources}
              // loading={loading}
              grid={listGrid}
              renderItem={(item) => {
                return (
                  <List.Item key={item.id}>
                    <ResourceCard
                      resourceId={item.id}
                      // loading={loading}
                      // prePageState={searchParams}
                      // keyword={searchParams.name}
                    />
                  </List.Item>
                );
              }}
            />
          </Col>
          <Col xl={6} lg={24} xs={24}>
            <Card title="讨论角">
              <List
                rowKey="id"
                dataSource={discuss}
                // split={false}
                // loading={true}
                pagination={{
                  size: 'small',
                  pageSize: DEFAULT_PAGE_SIZE,
                  current: pageNum,
                  showSizeChanger: false,
                  hideOnSinglePage: true,
                  // total,
                  onChange(newPageNum) {
                    setPageNum(newPageNum);
                  },
                }}
                renderItem={(item, index) => {
                  return (
                    <List.Item key={item.discuss.id}>
                      <Comment
                        author={item.user.nikename}
                        avatar={
                          <Avatar
                            src={
                              item.user.avatar
                                ? 'http://localhost:9999' + item.user.avatar
                                : defaultUser
                            }
                          />
                        }
                        content={<p>{item.discuss.content}</p>}
                        datetime={
                          <>
                            <Tooltip
                              title={moment(item.discuss.createAt).format('YYYY-MM-DD HH:mm:ss')}
                            >
                              <span>{moment(item.discuss.createAte).fromNow()}</span>
                            </Tooltip>
                          </>
                        }
                      />
                    </List.Item>
                  );
                }}
              />
              <TextArea
                rows={3}
                placeholder="请输入评论"
                onChange={(e) => {
                  setContent(e.target.value);
                }}
              />
              <Button
                type="primary"
                onClick={() => {
                  addDis({ content: content });
                }}
              >
                发表
              </Button>
            </Card>
          </Col>
        </Row>
      </GridContent>
    </div>
  );
};

export default Welcome;
